import React, { Component, Fragment } from "react";
// antd
import { Modal, Table, Button, Col, Pagination, Form, Input, message } from "antd";
import Action from "@c/buttonAction/Index";
// http
import http from '../../utils/request';

class NofityGroupManage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "钉钉群", dataIndex: "group_title", key: "group_title"},
                {title: "钉钉机器人Token", dataIndex: "robot_token", key: "robot_token"},
                {title: "备注", dataIndex: "remark", key: "remark"},
                {title: "操作", dataIndex: "operation", key: "operation", 
                    render: (text, rowData) => {
                        return (
                            <div className="inline-button">
                                <Action>
                                    <Action.Button onClick={() => this.onEditNotifyGroupBtn({rowData: rowData, status: true})}>编辑</Action.Button>
                                    <Action.Button onClick={() => this.onDeleteNotifyGroupBtn(rowData)}>删除</Action.Button>
                                </Action>
                            </div>

                        )
                    }           
                }
            ],

            search_group_title: '',        // 搜索组名
            search_robot_token: '',        // 搜索token
            visible_add: false,            // 添加
            visible_edit: false,           // 编辑
            visible_delete: false,         // 删除
            group_id: '',
            group_title: '',
        }
        this.formRefAdd = React.createRef();
        this.formRefEdit = React.createRef();
        this.formRefMsg = React.createRef();
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        this.setState({

        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'group_title__contains': this.state.search_group_title,
            'robot_token__contains': this.state.search_robot_token,
        }
        
        // 获取钉钉群列表
        http.get('/notify/group', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()

    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    } 

    // 搜索
    onFinishSearch = (data) => {
        this.setState({
            search_group_title: data.group_title ? data.group_title : null,
            search_robot_token: data.robot_token ? data.robot_token : null,
            page: 1
        })
        this.loadData()
    }

    // 添加钉钉群
    onNotifyGroupBtn = () => {
        this.setState({
            visible_add: true,
        })
    }

    // 添加钉钉群取消
    onFinishAddCancel = () => {
        this.setState({
            visible_add: false
        })
        this.formRefAdd.current.resetFields()
    }

    // 添加钉钉群提交
    onFinishAdd = (data) => {
        const requestData = {
            group_title: data.group_title,
            remark: data.remark,
            robot_token: data.robot_token,
        }
        http.post('/notify/group', requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_add: false,
            })
            this.formRefAdd.current.resetFields()
            this.loadData()
        }).catch()
    }

    // 编辑钉钉群按钮
    onEditNotifyGroupBtn = (data) => {
        this.setState({
            visible_edit: true
        })
        http.get('/notify/group').then(response=> {
            this.formRefEdit.current.setFieldsValue({
                id: data.rowData.id,
                group_title: data.rowData.group_title,
                robot_token: data.rowData.robot_token,
                remark: data.rowData.remark,
            })
        })
    }

    // 编辑钉钉群按钮取消
    onFinishEditCancel = () => {
        this.setState({
            visible_edit: false
        })
        this.formRefEdit.current.resetFields()
    }

    // 编辑钉钉群提交
    onFinishEdit = (data) => {
        const requestData = {
            group_title: data.group_title,
            robot_token: data.robot_token,
            remark: data.remark
        }
        http.put('/notify/group/' + data.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_edit: false
            })
            this.loadData()
        }).catch()
    }

    // 删除钉钉群按钮
    onDeleteNotifyGroupBtn = (data) => {
        this.setState({
            group_id: data.id,
            group_title: data.group_title,
            visible_delete: true
        })
    }
    
    // 删除钉钉群按钮提交
    handleNotifyGroupDelete = () => {
        http.delete('/notify/group/' + this.state.group_id).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_delete: false,
            })
            this.loadData()
        }).catch()  
    }

    render() {
        const { columns, dataSource, loading, page, total, visible_add, visible_edit, visible_delete, group_title } = this.state
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return(
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch}>
                    <Form.Item label="钉钉群名称" name="group_title">
                        <Input placeholder="请输入钉钉群名称"  />
                    </Form.Item>
                    <Form.Item label="Token名称" name="robot_token">
                        <Input placeholder="请输入token"  />
                    </Form.Item>                    
                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}><Button type="primary" onClick={this.onNotifyGroupBtn}>添加</Button></div>
                <Table
                    pagination={false} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>


                <Modal
                    title="添加钉钉群"
                    visible={visible_add}
                    onCancel={this.onFinishAddCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishAdd}
                        ref={this.formRefAdd}
                    >
                        <Form.Item label="钉钉群名称" name="group_title">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item label="钉钉Token" name="robot_token">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item label="钉钉群备注" name="remark">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="编辑钉钉群"
                    visible={visible_edit}
                    onCancel={this.onFinishEditCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishEdit}
                        ref={this.formRefEdit}
                    >
                        <Form.Item label="钉钉群ID" name="id" hidden>
                            <Input></Input>
                        </Form.Item>
                        <Form.Item label="钉钉群名称" name="group_title">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item label="钉钉Token" name="robot_token">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item label="钉钉群备注" name="remark">
                            <Input></Input>
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="删除钉钉群"
                    visible={visible_delete}
                    onOk={this.handleNotifyGroupDelete}
                    onCancel={() => {this.setState({visible_delete: false, group_id: '', group_title: ''})}}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定删除钉钉群<span style={{color: 'red'}}> {group_title}</span>? 删除后将无法恢复</p>
                </Modal>
            </Fragment>
        )
    }
}

export default NofityGroupManage;